<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Nested Groups Test</title>
    <link rel="stylesheet" href="../css/style.css">
    <script type="text/javascript" src="../../dist/paper-full.js"></script>
    <script type="text/paperscript" canvas="canvas">
        project.importSVG(document.getElementById('svg'));
    </script>
</head>
<body>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500" id="svg">
        <g>
            <circle cx="25" cy="25" r="20" style="fill:orange;" id="circle" />
            <g>
                <circle cx="75" cy="25" r="20" style="fill:red;" id="circle" />
                <g>
                    <circle cx="125" cy="25" r="20" style="fill:pink;" id="circle" />
                    <g>
                        <circle cx="175" cy="25" r="20" style="fill:blue;" id="circle" />
                        <g>
                            <circle cx="225" cy="25" r="20" style="fill:green;" id="circle" />
                            <g>
                                <circle cx="275" cy="25" r="20" style="fill:purple;" id="circle" />
                                <g>
                                    <circle cx="25" cy="75" r="20" style="fill:black;" id="circle" />
                                    <g>
                                        <circle cx="75" cy="75" r="20" style="fill:indigo;" id="circle" />
                                        <g>
                                            <circle cx="125" cy="75" r="20" style="fill:gold;" id="circle" />
                                            <g>
                                                <circle cx="175" cy="75" r="20" style="fill:brown;" id="circle" />
                                                <g>
                                                    <circle cx="225" cy="75" r="20" style="fill:darkred;" id="circle" />
                                                    <g>
                                                        <circle cx="275" cy="75" r="20" style="fill:darkgreen;" id="circle" />
                                                        <g>
                                                            <circle cx="25" cy="125" r="20" style="fill:darkgrey;" id="circle" />
                                                            <g>
                                                                <circle cx="75" cy="125" r="20" style="fill:violet;" id="circle" />
                                                                <g>
                                                                    <circle cx="125" cy="125" r="20" style="fill:yellow;" id="circle" />
                                                                    <g>
                                                                        <circle cx="175" cy="125" r="20" style="fill:lightblue;" id="circle" />
                                                                        <g>
                                                                            <circle cx="225" cy="125" r="20" style="fill:lightgreen;" id="circle" />
                                                                            <g>
                                                                                <circle cx="275" cy="125" r="20" style="fill:darkblue;" id="circle" />
                                                                                <g>
                                                                                    <circle cx="25" cy="175" r="20" style="fill:darkorange;" id="circle" />
                                                                                    <g>
                                                                                        <circle cx="75" cy="175" r="20" style="fill:lawngreen;" id="circle" />
                                                                                    </g>
                                                                                </g>
                                                                            </g>
                                                                        </g>
                                                                    </g>
                                                                </g>
                                                            </g>
                                                        </g>
                                                    </g>
                                                </g>
                                            </g>
                                        </g>
                                    </g>
                                </g>
                            </g>
                        </g>
                    </g>
                </g>
            </g>
        </g>

    </svg>
    <canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>
